<template>
	<div id="tmpl">
		<div id="descinfo">
			<div class="title">
				<h3>{{photoinfo.title}}</h3>
				<p>{{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}  
					{{photoinfo.click}}次浏览
				</p>
				<p class="line"></p>
			</div>
			
			<div class="mui-content">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li  v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)"
								 >
					</li>
				</ul>
			</div>
			
			<p v-html="photoinfo.content"></p>
		</div>
	</div>
</template>

<script>
	import common from "../../kits/common.js";
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return {
				photoinfo:"",
				id:0,
				list:""
			}
		},
		methods:{
			getinfo(){
				var url = common.apimain+"/api/getimageInfo/"+this.id
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						Toast(res.body.message);
						return;
					}
					this.photoinfo=res.body.message[0];
					
				})
			},
			getimgs(){
				var url = common.apimain+"/api/getthumimages/"+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						Toast(res.body.message);
						return;
					};
					res.body.message.forEach(function(item){
						var img = document.createElement("img");
						img.src=item.src;
						item.h=img.height;
						item.w=img.width;
					})
					this.list=res.body.message;
				})
			}
		},
		created(){
			this.id = this.$route.params.id;
			this.getinfo();
			this.getimgs();
			
		}
	}
</script>

<style scoped>
	#descinfo {
		padding: 10px;
	}
	
	#descinfo .title h4 {
		color: red;
	}
	
	#descinfo .title p {
		color: rgba(0, 0, 0, 0.4);
		margin-top: 10px;
	}
	
	#descinfo .title .line {
		width: 100%;
		height: 1px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	}
	.mui-content,
	.mui-content ul {
		background-color: #fff;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border-right: 0px;
		border-bottom: 0px;
	}
	
	.mui-grid-view.mui-grid-9 {
		border-top: 0px;
		border-left: 0px;
	}
	.mui-content img{
		width: 180px;
		height: 180px;
	}
</style>